<template>
  <div class="container-fluid">
<!--    顶部导航条-->
    <myheader></myheader>
<!--    中间内容-->
    <div class="main">
<!--      时间线-->
      <div class="time">
        <div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5" >
          <div class="col" >
            <h2 class="second_title">考研日历</h2>
          </div>
        </div>

        <div class="m-4" style="font-size: 20px;font-weight: bold">
          <el-steps :active="8" align-center direction="horizontal">
            <el-step v-for="item in list" :key="item.index"  :title="item.mouth" :description="item.action" :status="item.status ? 'success' : 'wait'"></el-step>
            <el-step title="次年2-5月" description="考研复试" tatus=""></el-step>
          </el-steps>
        </div>
      </div>
      <!-- 新闻 -->
      <div class="row ml-5">
<!--        走马灯-->
        <div class="col-md-5 column">
          <div class="block">
            <el-carousel height="330px">
              <el-carousel-item v-for="item in imgs" :key="item">
                <img :src="item" alt="...">
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
<!--        列表-->
        <div class="col-md-7 column">
          <div class="list-group">
            <a href="#" class="list-group-item list-group-item-action active">
              <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">List group item heading</h5>
                <small>3 days ago</small>
              </div>
              <p class="mb-1">Some placeholder content in a paragraph.</p>
              <small>And some small print.</small>
            </a>
            <a href="#" class="list-group-item list-group-item-action">
              <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">List group item heading</h5>
                <small class="text-muted">3 days ago</small>
              </div>
              <p class="mb-1">Some placeholder content in a paragraph.</p>
              <small class="text-muted">And some muted small print.</small>
            </a>
            <a href="#" class="list-group-item list-group-item-action">
              <div class="d-flex w-100 justify-content-between">
                <h5 class="mb-1">List group item heading</h5>
                <small class="text-muted">3 days ago</small>
              </div>
              <p class="mb-1">Some placeholder content in a paragraph.</p>
              <small class="text-muted">And some muted small print.</small>
            </a>
          </div>
        </div>
      </div>
<!--      考研资讯-->
      <div class="">
<!--        /*padding-left: 100px;*/-->
<!--        /*padding-right: 100px;*/-->
<!--        /*padding-top: 30px;*/-->
        <div class="row ml-5 mt-5">
          <div class="col-md-12 column">
            <div class="page-header border-bottom">
              <h1>
                <div type="button" class="btn btn-lg text-white" style="background-color: #B7C1AC">
                  考研资讯
                </div>
                <span style="font-size: 26px">&nbsp;&nbsp;&nbsp;GEGISTER&nbsp;&nbsp;&nbsp;INFORMATION</span>
              </h1>
            </div>
            <div class="row mt-4">
              <div class="col-md-3 column col-lg-3">
                <div class="card" style="width: 18rem;">
                  <ul class="list-group list-group-flush">
                    <li class="list-group-item">报考指南</li>
                    <li class="list-group-item">

                    </li>
                    <li class="list-group-item">A third item</li>
                    <li class="list-group-item">A third item</li>
                    <li class="list-group-item">A third item</li>
                    <li class="list-group-item">A third item</li>
                    <li class="list-group-item">A third item</li>
                  </ul>
                </div>
              </div>
              <div class="col-md-9 column col-lg-9">
                <el-tabs type="border-card">
                  <el-tab-pane label="用户管理">用户管理</el-tab-pane>
                  <el-tab-pane label="配置管理">配置管理</el-tab-pane>
                  <el-tab-pane label="角色管理">角色管理</el-tab-pane>
                  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
                </el-tabs>
              </div>
              <router-view></router-view>
            </div>
          </div>
        </div>
      </div>
      <!--      二手交易-->
      <div class="row ml-5 mt-5">
        <div class="col-md-12 column">
          <div class="row mt-4">
            <div class="col-md-6 column">
              <div class="page-header border-bottom">
                <h1>
                  <div type="button" class="btn btn-lg text-white" style="background-color: #B7C1AC">
                    二手交易
                  </div>
                </h1>
              </div>
              <el-tabs type="border-card">
                <el-tab-pane label="用户管理">用户管理</el-tab-pane>
                <el-tab-pane label="配置管理">配置管理</el-tab-pane>
                <el-tab-pane label="角色管理">角色管理</el-tab-pane>
                <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
              </el-tabs>
            </div>
            <div class="col-md-6 column ">
              <div class="page-header border-bottom">
                <h1>
                  <div type="button" class="btn btn-lg text-white" style="background-color: #B7C1AC">
                    交流讨论社区
                  </div>
                </h1>
              </div>
              <el-tabs type="border-card">
                <el-tab-pane label="用户管理">用户管理</el-tab-pane>
                <el-tab-pane label="配置管理">配置管理</el-tab-pane>
                <el-tab-pane label="角色管理">角色管理</el-tab-pane>
                <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
              </el-tabs>
            </div>
            <router-view></router-view>
          </div>
        </div>
      </div>
<!--      历年国家分数线-->
      <div class="m-5">
        <div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5" >
          <div class="col border-bottom" >
            <h2 class="second_title">历年国家分数线</h2>
          </div>
        </div>
        <div class="row mt-5 align-items-center text-center pl-lg-5" style="margin-left: 100px;">
          <div class="btn  rounded-circle mr-4 btn-lg" style="background-color: #B7C1AC">2016</div>
          <div class="btn  rounded-circle mr-4 btn-lg" style="background-color: #B7C1AC">2017</div>
          <div class="btn  rounded-circle mr-4 btn-lg" style="background-color: #B7C1AC">2018</div>
          <div class="btn  rounded-circle mr-4 btn-lg" style="background-color: #B7C1AC">2019</div>
          <div class="btn  rounded-circle mr-4 btn-lg" style="background-color: #B7C1AC">2020</div>
          <div class="btn  rounded-circle mr-4 btn-lg" style="background-color: #B7C1AC">2021</div>
          <div class="btn  rounded-circle mr-4 btn-lg" style="background-color: #B7C1AC">2022</div>
        </div>
      </div>
      <!--    -->
      <div class="border-top">
        <div class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5 mt-5" >
          <div class="col" >
            <h2 class="second_title">学长学姐说</h2>
          </div>
        </div>
        <div class="carousel mt-5 ml-5" >
          <el-carousel :interval="4000" type="card" height="650px">
            <el-carousel-item v-for="item in imgs" :key="item">
              <div class="card" style="width: 38rem;">
                <img :src="item" class="card-img-top" alt="...">
                <div class="card-body">
                  <h5 class="card-title">Card title</h5>
                  <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
                  <a href="#" class="btn" style="background-color: #B7C1AC">Go somewhere</a>
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>
    </div>
    <!--    底部导航条-->
    <myfooter></myfooter>
  </div>
</template>

<script>
import myfooter from './myfooter'
import myheader from './myheader'
import img1 from '@/assets/1.jpg'
import img2 from '@/assets/2.jpg'
import img3 from '@/assets/1.jpg'
import img4 from '@/assets/4.jpg'
import img5 from '@/assets/5.jpg'

export default {
   name: "Main",
  data() {
    return {
      activeName: 'first',
      imgs:[
        img1,img2,img3,img4,img5
      ],
      nowYear:0,
      nowMouth:0,
      //数据
      list:[
        {
          action: "确定考研方向",
          mouth: "1月",
          sign:1,
          status: 0,
        },
        {
          action: "发布考研大纲",
          mouth: "7-8月",
          sign:7,
          status:0,
        },
        {
          action: "发布招生简章",
          mouth: "9-10月",
          sign:9,
          status: 0,
        },
        {
          action: "开通报名入口",
          mouth: "10-11月",
          sign:10,
          status: 0,
        },
        {
          action: "现场确认",
          mouth: "11月",
          sign:11,
          status: 0,
        },
        {
          action: "打印准考证",
          mouth: "12月",
          sign:12,
          status: 0,
        },
        {
          action: "考研初试",
          mouth: "12月",
          sign:12,
          status: 0,
        },
        // {
        //   action: "考研复试",
        //   mouth:"次年2-5月",
        //   sign:0,
        //   status: 0,
        // },
      ]
    };
  },
  mounted() {
    let myDate = new Date();
    this.nowYear=myDate.getFullYear(); //获取完整的年份(4位,1970-????)
    this.nowMouth=myDate.getMonth()+1; //获取当前月份(0-11,0代表1月)
    console.log(this.nowYear);
    console.log(this.nowMouth);
    console.log(this.list.length);
    // console.log(this.list);
    for(let i=0;i<=this.list.length-2;i++)
    {
      if(this.nowMouth>=this.list[i].sign)
      {
        this.list[i].status=1;
        // console.log(this.list[i].sign);
      }
    }
  },
  components:{
    myfooter,
    myheader
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>

<style scoped>
.main
{
  padding-left: 100px;
  padding-right: 100px;
  padding-top: 30px;
}
/*各部分小标题*/
.second_title
{
  font-weight: bold;
}

/*当前步骤数横线样式设置*/
   .el-step__line-inner{
     width: 50% !important;
     border-width: 1px !important;
   }
/*当前步骤数圆圈样式设置*/
   .el-step__icon.is-text{
     background: #409eff;
     color:#fff;
   }
</style>
